<template>
  <div class="energy-wrap">
    <div class="energy-main">
      <div class="center-left">
        <!-- <section class="weather">
            <div class="title-arrow"></div>
            <div class="section-title">天气情况</div>
            <div class="pm-drop">
                <div class="drop-text">
                        <span>PM
                            <br>2.5</span>
                </div>
            </div>
            <div class="pm-circle ng-binding">44</div>
            <div class="weather-info">
                <ul>
                    <li class="ng-binding"><img src="/img/board/icon-list.png" alt=""> 湿度：40%</li>
                    <li class="ng-binding"><img src="/img/board/icon-list.png" alt=""> 风力：4级
                        风向：西南风
                    </li>
                    <li class="ng-binding"><img src="/img/board/icon-list.png" alt=""> 质量：良</li>
                </ul>
            </div>
            <div class="next-weather">
                <ul>
                    <li ng-repeat="t in weather.result.list" class="ng-scope" style="">
                        <img v-show="isNight" ng-src="/img/weather/100.png" alt="" src="/img/weather/100.png" class="ng-hide">
                        <img v-show="!isNight" ng-src="/img/weather/100.png" alt="" src="/img/weather/100.png" class="">
                        <div class="ng-binding">21-32°C</div>
                    </li><li ng-repeat="t in weather.result.list" class="ng-scope">
                        <img v-show="isNight" ng-src="/img/weather/306.png" alt="" src="/img/weather/306.png" class="ng-hide">
                        <img v-show="!isNight" ng-src="/img/weather/306.png" alt="" src="/img/weather/306.png" class="">
                        <div class="ng-binding">13-28°C</div>
                    </li><li ng-repeat="t in weather.result.list" class="ng-scope">
                        <img v-show="isNight" ng-src="/img/weather/305.png" alt="" src="/img/weather/305.png" class="ng-hide">
                        <img v-show="!isNight" ng-src="/img/weather/305.png" alt="" src="/img/weather/305.png" class="">
                        <div class="ng-binding">11-18°C</div>
                    </li>
                </ul>
            </div>
        </section> -->
        <!-- <section class="projbuild">
          <div class="title-arrow"></div>
          <div class="section-title">项目建筑</div>
          <div class="icon-projnum"></div>
          <div class="icon-buildnum"></div>
          <div class="projnum-info ng-binding">项目总数：17个</div>
          <div class="buildnum-info ng-binding">建筑栋数：38栋</div>
        </section> -->
        <section class="energyrate">
          <div class="title-arrow"></div>
          <div class="section-title">节能率变化趋势</div>
          <div class="chart-energyrate">
             <v-chart :options="chartParams1" :watchShallow="true" :auto-resize="true" :style="{'width': '100%', 'height': '100%'}" />
          </div>
          <div class="title-arrow2"></div>
          <div class="section-title2">能耗趋势对比</div>
          <div class="chart-energytrend">
            <v-chart :options="chartParams4" :watchShallow="true" :auto-resize="true" :style="{'width': '100%', 'height': '100%'}" />
          </div>
        </section>
        <!-- <section> -->
            <!-- <section class="orders">
                <div class="title-arrow"></div>
                <div class="section-title">工单分类汇总</div>
                <div class="chart-orders">
                  <v-chart :options="option4" :watchShallow="true" :auto-resize="true" :style="{'width': '100%', 'height': '100%'}" />
                </div>
            </section> -->
        <!-- </section> -->
      </div>
      <div class="center-middle">
        <section id="map">
          <div class="title ng-binding">广东省税务局节能管理平台</div>
          <section id="slideshow">
            <v-chart :options="chartParams2" :watchShallow="true" :auto-resize="true" :style="{'width': '100%', 'height': '100%'}" />
          </section>
          <section class="totalinfo ng-hide" v-show="currentItem=='0'" style="">
              <span class="totalinfo-title">总建筑面积</span>
              <br>
              <span class="totalinfo-content ng-binding">{{projectDetail.floorage}} ㎡</span>
              <br>
              <span class="totalinfo-title">地上楼层面积</span>
              <br>
              <span class="totalinfo-content ng-binding">{{projectDetail.aboveFloor}} ㎡</span>
              <br>
              <span class="totalinfo-title">总停车面积</span>
              <br>
              <span class="totalinfo-content ng-binding">{{projectDetail.totalParking}} ㎡</span>
              <br>
              <span class="totalinfo-title">广场及绿化面积</span>
              <br>
              <span class="totalinfo-content ng-binding">{{projectDetail.squareGreen}} ㎡</span>
          </section>
          <section class="totalinfo ng-hide" v-show="currentItem=='1'" style="">
              <span class="totalinfo-title">总建筑面积</span>
              <br>
              <span class="totalinfo-content ng-binding">{{equipmentDetail.floorage}} ㎡</span>
              <br>
              <span class="totalinfo-title">完好设备台数</span>
              <br>
              <span class="totalinfo-content ng-binding">{{equipmentDetail.intactCount}} 台</span>
              <br>
              <span class="totalinfo-title">检修设备台数</span>
              <br>
              <span class="totalinfo-content ng-binding">{{equipmentDetail.repairCount}} 台</span>
              <br>
              <span class="totalinfo-title">特种设备数</span>
              <br>
              <span class="totalinfo-content ng-binding">{{equipmentDetail.specialCount}} 台</span>
          </section>
          <section class="totalinfo" v-show="currentItem=='2'" style="">
              <span class="totalinfo-title">总建筑面积</span>
              <br>
              <span class="totalinfo-content ng-binding">{{energyDetail.floorage}} ㎡</span>
              <br>
              <span class="totalinfo-title">累计节电量</span>
              <br>
              <span class="totalinfo-content ng-binding">{{energyDetail.powerSave}} kwh</span>
              <br>
              <span class="totalinfo-title">累计节省标煤</span>
              <br>
              <span class="totalinfo-content ng-binding">{{energyDetail.coalSave}} t</span>
              <br>
              <span class="totalinfo-title">减少碳排量</span>
              <br>
              <span class="totalinfo-content ng-binding">{{energyDetail.carbonReduc}} t</span>
          </section>
          <!-- <section class="totalinfo ng-hide" v-show="currentItem=='3'" style="">
              <span class="totalinfo-title">总建筑面积</span>
              <br>
              <span class="totalinfo-content ng-binding">43.4 ㎡</span>
              <br>
              <span class="totalinfo-title">累计工单数</span>
              <br>
              <span class="totalinfo-content ng-binding">58057 单</span>
              <br>
              <span class="totalinfo-title">已处理工单</span>
              <br>
              <span class="totalinfo-content ng-binding">44523 单</span>
              <br>
              <span class="totalinfo-title">正在处理工单</span>
              <br>
              <span class="totalinfo-content ng-binding">54 单</span>
          </section> -->
          <section class="totalinfo ng-hide" v-show="currentItem=='3'" style="">
              <span class="totalinfo-title">总建筑面积</span>
              <br>
              <span class="totalinfo-content ng-binding">{{personDetail.floorage}} ㎡</span>
              <br>
              <span class="totalinfo-title">设备管理人员</span>
              <br>
              <!--hack：设备管理人员应当小于设备技术人员，所以把这两者中大的当做技术人员。-->
              <span class="totalinfo-content ng-binding">{{personDetail.managerCount}} 人</span>
              <!--<span class="totalinfo-content">110 人</span>-->
              <br>
              <span class="totalinfo-title">设备技术人员</span>
              <br>
              <span class="totalinfo-content ng-binding">{{personDetail.mechanicCount}} 人</span>
              <!--<span class="totalinfo-content">762 人</span>-->
              <!--<span class="totalinfo-title">人员流动率</span>-->
              <!--<span class="totalinfo-content">{{infoData.result.userRate}} %</span>-->
          </section>
          <section class="bigtotalinfo ng-hide" v-show="currentItem=='5'" ng-click="go('platform.solarmap',null)" style="">
              <span class="totalinfo-title">装机容量</span>
              <br>
              <span class="totalinfo-content ng-binding">1878.48  千瓦</span>
              <br>
              <span class="totalinfo-title">光伏面积</span>
              <br>
              <span class="totalinfo-content ng-binding">24893.00  平方米</span>
              <!--<span class="totalinfo-content">110 人</span>-->
              <br>
              <span class="totalinfo-title">储电容量</span>
              <br>
              <span class="totalinfo-content ng-binding">1025.00  千瓦时</span>
              <br>
              <span class="totalinfo-title">累计发电</span>
              <br>
              <span class="totalinfo-content ng-binding"></span>
              <br>
              <span class="totalinfo-title">累计减碳</span>
              <br>
              <span class="totalinfo-content ng-binding"></span>
          </section>
          <ul>
              <li v-for="(item, index) in listMap" :name="index" :class="{active: currentItem == index}" :key="index" @click="changeCurrent(index)"><img :src="item.icon" alt="">&nbsp;{{item.name}}</li>
          </ul>
        </section>
        <section class="eqratio">
          <div class="title-arrow"></div>
          <div class="section-title">设备类型占比</div>
          <div class="chart-eqratio">
            <v-chart :options="chartParams6" :watchShallow="true" :auto-resize="true" :style="{'width': '100%', 'height': '100%'}" />
          </div>
      </section>
       <section class="energyratio">
            <div class="title-arrow"></div>
            <div class="section-title">本月用能占比</div>
            <div class="chart-energyratio">
              <v-chart :options="chartParams3" :watchShallow="true"  :style="{'width': '100%', 'height': '100%'}" />
            </div>
        </section>
      </div>
      <div class="center-right">
        <section class="energyeq">
            <div class="title-arrow"></div>
            <div class="section-title">用能设备概况</div>
            <div class="icon-eqnum"></div>
            <div class="icon-goodrate"></div>
            <div class="eqnum-info">
                <div class="info-title">设备台数</div>
                <div class="info-content">
                    <span class="content-eqnum ng-binding">{{equipmentCount}} 台</span>
                </div>
            </div>
            <div class="goodrate-info">
                <div class="info-title">整体完好率</div>
                <div class="info-content">
                    <span class="content-goodrate ng-binding">{{intactRate}}%</span>
                </div>
            </div>
            <!-- <div class="proj-table">
                <span class="content-eqnum">项目设备数量排行榜</span>
                <table>
                    <tbody><tr class="special-row">
                        <td class="num-td">排名</td>
                        <td class="num-td">top1</td>
                        <td class="num-td">top2</td>
                        <td class="num-td">top3</td>
                        <td class="num-td">top4</td>
                        <td class="num-td">top5</td>
                    </tr>
                    <tr>
                        <td class="num-td">项目<br>名称</td>
                        <td ng-repeat="t in projectNames track by $index" class="ng-binding ng-scope" style="">汕头市税务局</td><td ng-repeat="t in projectNames track by $index" class="ng-binding ng-scope">江门市税务局</td><td ng-repeat="t in projectNames track by $index" class="ng-binding ng-scope">广东省税务局珠江新城</td><td ng-repeat="t in projectNames track by $index" class="ng-binding ng-scope">河源市税务局</td><td ng-repeat="t in projectNames track by $index" class="ng-binding ng-scope">广州市天河区税务局</td>
                    </tr>
                    <tr class="spe-row">
                        <td class="num-td">设备<br>台数</td>
                        <td class="num-td ng-binding ng-scope" ng-repeat="x in eqNums track by $index" style="">515</td><td class="num-td ng-binding ng-scope" ng-repeat="x in eqNums track by $index">185</td><td class="num-td ng-binding ng-scope" ng-repeat="x in eqNums track by $index">156</td><td class="num-td ng-binding ng-scope" ng-repeat="x in eqNums track by $index">132</td><td class="num-td ng-binding ng-scope" ng-repeat="x in eqNums track by $index">107</td>
                    </tr>
                </tbody></table>
            </div> -->
        </section>
        <section class="energyeq2">
            <div class="title-arrow"></div>
            <div class="section-title">本月设备用能排行TOP5</div>
            <table class="top-table">
              <thead>
                <th>排名</th>
                <th>设备类型</th>
                <th width="23%"></th>
                <th>用量(kwh)</th>
              </thead>
              <tbody>
                <tr v-for="(item, index) in topList">
                  <!-- <td>Top{{index+1}}</td>
                  <td>{{item.name}}</td>
                  <td><el-progress :percentage="50" :show-text="false"></el-progress></td>
                  <td>{{item.count}}</td> -->
                  <td>{{item.rank}}</td>
                  <td>{{item.region}}</td>
                  <td><el-progress :percentage="item.percent" :show-text="false"></el-progress></td>
                  <td>{{item.value}}</td>
                </tr>
              </tbody>
            </table>
        </section>
        <section class="energyeq1">
            <div class="title-arrow"></div>
            <div class="section-title">本月用能情况</div>
            <div class="item-block-3">
              <div class="icon-coal"></div>
              <div class="coal-info">
                  <div class="info-title">用能总量</div>
                  <div class="info-content">
                      <span class="content-eqnum ng-binding">{{monthUseEnergyObj.coalUsed}}</span>
                  </div>
              </div>
            </div>
             <div class="item-block-3">
               <div class="icon-ele"></div>
                <div class="ele-info">
                <div class="info-title">用电量</div>
                <div class="info-content">
                    <span class="content-eqnum ng-binding">{{monthUseEnergyObj.electricUsed}}</span>
                </div>
            </div>
             </div>
              <div class="item-block-3">
               <div class="icon-water"></div>
               <div class="water-info">
                  <div class="info-title">用水量</div>
                  <div class="info-content">
                      <span class="content-goodrate ng-binding">{{monthUseEnergyObj.waterUsed}}</span>
                  </div>
              </div>
             </div>
        </section>
      <!-- <section class="kpi">
            <div class="title-arrow"></div>
            <div class="section-title">运维工单绩效</div>
            <v-chart :options="option5" :watchShallow="true" :auto-resize="true" :style="{'width': '100%', 'height': '100%'}" />
            <div class="kpi-info">
                    <span class="info-name">
                        <div class="info-box1"></div>完成率</span>
                <br>
                <span class="info-data ng-binding">76.7%</span>
                <br>
                <span class="info-name">
                        <div class="info-box2"></div>合格率</span>
                <br>
                <span class="info-data ng-binding">76.6%</span>
                <br>
                <span class="info-name">
                        <div class="info-box3"></div>及时率</span>
                <br>
                <span class="info-data ng-binding">76.7%</span>
                <br>
            </div>
        </section> -->
      </div>
    </div>
   
  </div>
</template>

<script type="text/ecmascript-6">
import 'echarts/map/js/province/guangdong.js'
import {accAdd} from '@/util/util'
import { dataOverview, energySaveTrend, energyUseTrend, equipmentTypeRatio, equipmentDetail, energyUseRatio, monthUseEnergy, regionUseEnergy} from '@/api/energy/energy'
const option1 = {
  color: ['#28daa5'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: 80,
    right: 50,
    bottom: 40,
    top: 60
  },
  legend: {
    right: 10,
    top: 20,
    itemWidth: 20,
    itemHeight:8,
    textStyle: {
      color: '#03b4d6'
    },
    data: ['节能率']
  },
  xAxis: {
    type: 'category',
    data: [],
    axisLine: {
      show: true,
      lineStyle:{
        color: '#008acd',
        width: 2
      }
    },
    axisTick: {
      show:false
    },
    axisLabel: {
      show: true,
      color: '#03b4d6',
      rotate: 30
    }
  },
  yAxis: {
    type: 'value',
    interval: 20,
    max: 20,
    axisLine: {
      show: true,
      lineStyle:{
        color: '#008acd',
        width: 2
      }
    },
    axisLabel: {
      color: '#03b4d6',
      formatter: '{value}%'
    },
    axisTick: {
      show:false
    },
    splitLine: {
      show:false
    }
  },
  series: [{
    name: '节能率',
    data: [],
    type: 'line',
    itemStyle: {
      normal: {
        lineStyle: {
          width: 3// 设置线条粗细
        }
      }
    },
  }]
}
const option2 =  {
  color: ['#03b4d6', '#28daa5'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: 80,
    right: 10,
    bottom: 40,
    top: 60
  },
  legend: {
    right: 10,
    top: 20,
    itemWidth: 20,
    itemHeight:10,
    textStyle: {
      color: '#03b4d6'
    },
    data: ['用能基数', '实际用能(tce)']
  },
  xAxis: {
    type: 'category',
    data: [],
    axisLine: {
      show: true,
      lineStyle:{
        color: '#008acd',
        width: 2
      }
    },
    axisTick: {
      show:false
    },
    axisLabel: {
      show: true,
      color: '#03b4d6',
      rotate: 30
    }
  },
  yAxis: {
    type: 'value',
    // interval: 10,
    axisLine: {
      show: true,
      lineStyle:{
        color: '#008acd',
        width: 2
      }
    },
    axisLabel: {
      color: '#03b4d6',
      formatter: '{value}'
    },
    axisTick: {
      show:false
    },
    splitLine: {
      show:false
    }
  },
  series: [
    {
      name: '用能基数',
      data: [],
      type: 'bar',
      itemStyle: {
        normal: {
          lineStyle: {
            width: 3// 设置线条粗细
          },
          barBorderRadius: 6
        }
      }
    },
    {
      name: '实际用能(tce)',
      data: [],
      type: 'bar',
      itemStyle: {
        normal: {
          lineStyle: {
            width: 3// 设置线条粗细
          },
          barBorderRadius: 6
        }
      },
    }
  ]
}
const option3 = {
  // color: ['#324df3', '#1681e5', '#30aee2', '#7d2dea'],
  color: ['#35c395', '#b56c03', '#5821c8', '#00bfbc', '#0063bf', '#03bf4e', '#0081f4', '#1e72da', '#9757ee', '#dc69aa', '#07a2a4'],
  tooltip: {
    trigger: 'item',
    formatter: function (params) {
      let res = '<p style="color: #fff;margin-bottom: 0">' + params.name + '</p><p style="color: #fff;margin-bottom: 0">' + params.value + 'tce(' + params.percent + '%)</p>'
      return res
    }
  },
  legend: {
    orient: 'vertical',
    left: 130,
    // right: 20,
    top: 60,
    align: 'left',
    itemWidth: 20,
    textStyle:{
      color: '#03b4d6'
    }
  },
  series: [
    {
      type: 'pie',
      radius: '49%',
      label: false,
      left: 0,
      top: 10,
      center: [80, '50%'],
      data: [
        //  { value: 17690776, name: '特殊用电' },
        //  { value: 18351432, name: '照明插座用电' },
        //  { value: 24483229, name: '空调用电' },
        //  { value: 6560480, name: '动力用电' }
      ]
    }
  ]
}
const option4 = {
  color: ['#1681e5'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    show: false
  },
  grid: {
    left: '5%',
    right: '15%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    axisLine: {
      show: true,
      lineStyle:{
        color: '#008acd',
        width: 2
      }
    },
    interval: 10000,
    axisTick: {
      show:false
    },
    splitLine: {
      show:false
    },
    axisLabel: {
      show: true,
      color: '#03b4d6',
      rotate: 30
    }
  },
  yAxis: {
    type: 'category',
    axisLine: {
      show: true,
      lineStyle:{
        color: '#008acd',
        width: 2
      }
    },
    inverse: true,
    axisLabel: {
      color: '#03b4d6',
      formatter: '{value}'
    },
    axisTick: {
      show:false
    },
    splitLine: {
      show:false
    },
    data: ['其他工单', '保养工单', '预警工单', '报修工单', '巡检工单']
  },
  series: [
    {
      name: '2011',
      type: 'bar',
      label:{
        show: true,
        position: 'right',
      },
      itemStyle: {
        normal: {
          lineStyle: {
            width: 3// 设置线条粗细
          },
          barBorderRadius: 6
        }
      },
      data: [0, 0, 229, 65, 57763]
    },
  ]
}
const option5 =  {
  color: ['#f47302', '#00a5ff', '#00c375'],
  polar: {
    radius: [0, '60%'],
    center: ['30%', '55%']
  },
  angleAxis: {
    max: 100,
    splitLine: {
      show: false,
    },
    align: 'left',
    axisLine: {
      show:true,
      lineStyle: {
        color: '#00a5ff'
      }
    },
    axisLabel:{
      show:false
    },
    axisTick: {
      show:false
    },
  },
  radiusAxis: {
    type: 'category',
    axisLine: {
      show:true,
      color: '#00a5ff'
    },
    axisTick: {
      show:false
    },
    splitLine: {
      show: false
    },
    // data: ['a', 'b', 'c', 'd']
  },
  tooltip: {},
  series: [
    {
      type: 'bar',
      data: [-76.5],
      coordinateSystem: 'polar',
      label: {
        show: false,
        position: 'middle',
        formatter: '{b}: {c}'
      },
      barWidth: 6,
      barGap: '150%',
    },
    {
      type: 'bar',
      data: [76.6],
      coordinateSystem: 'polar',
      label: {
        show: false,
        position: 'middle',
        formatter: '{b}: {c}'
      },
      itemStyle: {
        normal: {
          decal: {
            rotation: 3// 设置线条粗细
          },
        }
      },
      barWidth: 6,
      barGap: '150%',
    },
    {
      type: 'bar',
      data: [-76.7],
      coordinateSystem: 'polar',
      label: {
        show: false,
        position: 'middle',
        formatter: '{b}: {c}'
      },
      barWidth: 6,
      barGap: '150%',
    },
  ]
}
const option6 = {
  color: ['#35c395', '#b56c03', '#5821c8', '#00bfbc', '#0063bf', '#03bf4e', '#0081f4', '#1e72da', '#9757ee', '#dc69aa', '#07a2a4'],
  tooltip: {
    trigger: 'item',
    formatter: function (params) {
      let res = '<p style="color: #fff;margin-bottom: 0">' + params.name + '</p><p style="color: #fff;margin-bottom: 0">' + params.value + '台(' + params.percent + '%)</p>'
      return res
    }
  },
  legend: {
    show: false
  },
  series: [
    {
      type: 'pie',
      center: ['50%', '50%'],
      radius: ['40%', '75%'],
      avoidLabelOverlap: false,
      label: {
        show: true
      },
      labelLine: {
        show: true
      },
      data: [
        // { value: 311, name: '供配电系统' },
        // { value: 90, name: '给排水系统' },
        // { value: 143, name: '自动消防系统' },
        // { value: 483, name: '空调制冷系统' },
        // { value: 61, name: '供暖供热系统' },
        // { value: 49, name: '电梯运输系统' },
        // { value: 19, name: '安防管理系统' },
        // { value: 5, name: '智能管理系统' },
        // { value: 89, name: '厨房设备系统' },
        // { value: 33, name: '办公及通讯系统' },
        // { value: 231, name: '照明系统设备' },
      ]
    }
  ]
}
const option7 = {
  tooltip: {
    show: false
  },
  series: [
    {
      name: "场区数量", //名称
      type: "map", //对应的图标类型
      map: "china", //对应的地图名称
      top: 0,
      zoom: "1", //缩放的倍数当前为放大1.1倍
      roam: false,
      label: {
        show: false, //是否显示地图上方的省的名字
        color: "#fff",
        fontSize: 12, //显示字体的大小
        fontWeight: 400,
      },
      data: [], //地图内填充的数据  格式为{{name:'',value:''}}
      itemStyle: {
        areaColor: "#33486E", //控制区域的背景颜色
        borderColor: "#eee", //控制区域周边边框的颜色
      },
      markPoint: {
        symbol: 'circle',
        symbolKeepAspect: true,
        symbolSize: 20,
        itemStyle: {
          color: '#00df9c',
          borderColor: '#03b596',
          borderWidth: 5
        },
        data: [{
          coord: [
            113.5107, 23.12015 //坐标，通过高德
          ],
        }],
      },
      silent: true,
      //高亮显示的区域
      emphasis: {
        label: {
          fontSize: 13,
          show: false,
          color: "#fff",
        },
        itemStyle: {
          show: false,
          areaColor: "#33486E", //控制区域的背景颜色
        },
      },
    },
  ]
}
export default {
  data () {
    return {
      topList: [
        // {
        //   name: 'F12',
        //   total: '80%',
        //   count: '15.29'
        // },
        // {
        //   name: 'F12',
        //   total: '80%',
        //   count: '15.29'
        // },
        // {
        //   name: 'F12',
        //   total: '80%',
        //   count: '15.29'
        // },
        // {
        //   name: 'F12',
        //   total: '80%',
        //   count: '15.29'
        // },
        // {
        //   name: 'F12',
        //   total: '80%',
        //   count: '15.29'
        // }
      ],
      energyDetail: {},
      equipmentDetail: {},
      personDetail: {},
      projectDetail:{},
      intactRate: '',
      monthUseEnergyObj: {},
      equipmentCount: '',
      chartParams1: {},
      chartParams3: {},
      chartParams4: {},
      chartParams5: {},
      chartParams6: {},
      chartParams7: {},
      currentItem: 0,
      isNight: true,
      listMap: [
        {
           name: '项目总览',
           icon: '/img/board/label-proj.png',
         },
        {
          name: '设备总览',
          icon: '/img/board/label-eq.png'
        },
        {
          name: '能耗总览',
          icon: '/img/board/label-energy.png'
        },
        // {
        //   name: '工单总览',
        //   icon: '/img/board/label-order.png'
        // },
        {
          name: '人员总览',
          icon: '/img/board/label-staff.png'
        },
        // {
        //   name: '光伏总览',
        //   icon: '/img/board/label-solar.png'
        // }
      ],
      
    }
  },
  created() {
    this.init()
  },
  computed: {
    chartParams2() {
      return this.getOptions(this.currentItem)
    }
  },
  methods: {
    init() {
      dataOverview().then(res => {
        this.personDetail = res.data.data.personDetail
        this.equipmentDetail = res.data.data.equipmentDetail
        this.energyDetail = res.data.data.energyDetail
        this.projectDetail = res.data.data.projectDetail
      })
      energySaveTrend().then(res => {
        option1.xAxis.data = res.data.data.map(item => {
          return item.date
        })
        option1.series[0].data = res.data.data.map(item => {
          return item.energySaveRate
        })
        this.chartParams1 = option1
      })
      energyUseTrend().then(res => {
        option2.xAxis.data = res.data.data.map(item => {
          return item.date
        })
        option2.series[0].data = res.data.data.map(item => {
          return item.energyUseBase
        })
        option2.series[1].data = res.data.data.map(item => {
          return item.energyUseActual
        })
        this.chartParams4 = option2
      })
      equipmentTypeRatio().then(res => {
        option6.series[0].data = res.data.data
        this.chartParams6 = option6
      })
      equipmentDetail().then(res => {
        this.equipmentCount = res.data.data.equipmentCount
        this.intactRate = res.data.data.intactRate
      })
      energyUseRatio().then(res => {
        if (res.data.data.length && res.data.data.length < 8) {
          option3.series[0].center = [150, '55%']
          option3.series[0].radius = '75%'
          option3.legend.left = 250
        }
        res.data.data.map(item => {
          item.value = item.value.toFixed(2)
        })
        option3.series[0].data = res.data.data
        this.chartParams3 = option3
      })
      monthUseEnergy().then(res => {
        this.monthUseEnergyObj = res.data.data
      })
      regionUseEnergy().then(res => {
        let list = res.data.data.map(item => {
          return item.value
        })
        let total = list.reduce((pre, cur) => {
          return accAdd(pre, cur)
        })
        res.data.data.map(item => {
          item.percent = Math.floor(item.value / total * 100)
        })
        this.topList = res.data.data
      })
    },
    changeCurrent(index) {
      this.currentItem = index
    },
    getOptions(index) {
      let newmarkPoint = {
        symbol: 'circle',
        symbolKeepAspect: true,
        symbolSize: 20,
        itemStyle: {
          color: '#00df9c',
          borderColor: '#03b596',
          borderWidth: 5
        },
        emphasis: {
          label: {
            fontSize: 13,
            show: true,
            formatter: function (params) {
              return 116
            },
            position: 'right',
            color: "#fff",
          },
          itemStyle: {
            show: false,
            areaColor: "#33486E", //控制区域的背景颜色
          },
        },
        data: [{
          coord: [
            113.5107, 23.12015 //坐标，通过高德
          ],
        }],
      }
      if (index === 0) {
      //   newmarkPoint.itemStyle.color = '#feed00'
      //   newmarkPoint.itemStyle.borderColor = '#bec01f'
      // } else if (index === 1) {
        newmarkPoint.itemStyle.color = '#02f1f4'
        newmarkPoint.itemStyle.borderColor = '#029eb8'
      } else if (index === 1) {
        newmarkPoint.itemStyle.color = '#00df9c'
        newmarkPoint.itemStyle.borderColor = '#03b596'
      } else if (index === 3) {
        newmarkPoint.itemStyle.color = '#8533f5'
         newmarkPoint.itemStyle.borderColor = '#4540be'
      } else if (index === 2) {
        newmarkPoint.itemStyle.color = '#f47302'
        newmarkPoint.itemStyle.borderColor = '#7a5540'
      // } else if (index === 5) {
      //   newmarkPoint.itemStyle.color = '#df16b1'
      //   newmarkPoint.itemStyle.borderColor = '#b464ac'
      }
      return {
        tooltip: {
          show: false
        },
        series: [
          {
            name: "场区数量", //名称
            type: "map", //对应的图标类型
            map: "广东", //对应的地图名称
            top: 0,
            zoom: "1", //缩放的倍数当前为放大1.1倍
            roam: false,
            label: {
              show: false, //是否显示地图上方的省的名字
              color: "#2886ca",
              fontSize: 12, //显示字体的大小
              fontWeight: 400,
            },
            data: [], //地图内填充的数据  格式为{{name:'',value:''}}
            itemStyle: {
              areaColor: "#00367f", //控制区域的背景颜色
              borderColor: "#009883", //控制区域周边边框的颜色
            },
            // markPoint: newmarkPoint,
            silent: false,
            //高亮显示的区域
            emphasis: {
              label: {
                fontSize: 13,
                show: false,
                color: "#fff",
              },
              itemStyle: {
                show: false,
                areaColor: "#00367f", //控制区域的背景颜色
              },
            },
          },
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-progress-bar__outer{
  background-color: #0e1437
}
.energy-wrap{
  height: 100%;
  width: 100%;
  background: url(../../../../public/img/board/background.png) no-repeat;
  background-size: 100% 100%;
  overflow-x: hidden;
  overflow-y: auto;
  .title-arrow {
      position: absolute;
      left: 1.375rem;
      top: 0.9375rem;
      background: url(../../../../public/img/board/icon-titlearrow.png) no-repeat;
      width: 0.875rem;
      height: 0.6875rem;
  }
  .section-title {
    color: #2886ca;
    position: absolute;
    left: 2.75rem;
    top: 0.9375rem;
    height: 0.6875rem;
    font-weight: bold;
    line-height: 0.6875rem;
  }
  ul, li {
      list-style: none;
      padding: 0;
  }
  .energy-main{
    position: relative;
    // height: 49rem;
    height: 45rem;
    .center-left{
      position: absolute;
      top: 2.6875rem;
      left: 0.5rem;
      width: 21.25rem;
      .energyrate {
          position: relative;
          height: 43.6rem;
          margin: 0;
          background: url(../../../../public/img/board/back-energyrate.png) no-repeat;
          background-size: 100% 100%;
          margin-bottom: 0.375rem;
          .chart-energyrate {
              position: absolute;
              left: 0rem;
              top: 0rem;
              width: 21rem;
              height: 21.5rem;
          }
          .title-arrow2 {
              position: absolute;
              left: 1.375rem;
              top: 23.3125rem;
              background: url(../../../../public/img/board/icon-titlearrow.png) no-repeat;
              width: 0.875rem;
              height: 0.6875rem;
          }
          .section-title2 {
              color: #2886ca;
              position: absolute;
              left: 2.75rem;
              top: 23.3125rem;
              height: 0.6875rem;
              line-height: 0.6875rem;
          }
          .chart-energytrend {
              position: absolute;
              left: 0rem;
              top: 22.375rem;
              width: 21rem;
              height: 20.5rem;
          }
      }
      .projbuild {
        position: relative;
        height: 11.875rem;
        background: url(../../../../public/img/board/back-projbuild.png) no-repeat;
        background-size: 100% 100%;
        margin-bottom: 0.375rem;
        .icon-projnum {
            position: absolute;
            left: 3.625rem;
            top: 3.3125rem;
            width: 3.125rem;
            height: 3.125rem;
            background: url(../../../../public/img/board/icon-projnum.png) no-repeat;
            background-size: 100% 100%;
        }
        .icon-buildnum {
            position: absolute;
            left: 3.625rem;
            top: 7.25rem;
            width: 3.125rem;
            height: 3.125rem;
            background: url(../../../../public/img/board/icon-buildnum.png) no-repeat;
            background-size: 100% 100%;
        }
        .projnum-info {
          position: absolute;
          left: 7.625rem;
          top: 3.9375rem;
          height: 1.875rem;
          line-height: 2rem;
          text-align: center;
          padding: 0 0.9375rem;
          border: 1px solid #0d5d81;
          color: #13dcf5;
        }
        .buildnum-info {
            position: absolute;
            left: 7.625rem;
            top: 8rem;
            height: 1.875rem;
            line-height: 1.9375rem;
            text-align: center;
            padding: 0 0.9375rem;
            border: 1px solid #0d5d81;
            color: #13dcf5;
        }
      }
      .weather {
        position: relative;
        height: 8.875rem;
        background: url(../../../../public/img/board/back-weather.png) no-repeat;
        background-size: 100% 100%;
        margin-bottom: 0.375rem;
        .pm-drop {
          position: absolute;
          left: 1.25rem;
          top: 2.8125rem;
          width: 3.125rem;
          height: 4.5rem;
          display: table;
          z-index: 1;
          color: white;
          background: url(../../../../public/img/board/pm-drop.png) no-repeat;
          background-size: 100% 100%;
          .drop-text {
              display: table-cell;
              vertical-align: bottom;
              text-align: center;
              padding-bottom: 0.4375rem;
              span {
                  font-size: 0.625rem;
                  display: inline-block;
              }
          }
        }
        .pm-circle {
            position: absolute;
            left: 3.625rem;
            top: 3.625rem;
            width: 4.1875rem;
            height: 4.1875rem;
            text-align: center;
            line-height: 4.1875rem;
            font-size: 1.875rem;
            font-family: 'RTWSYueGoTrial-LightCond';
            color: white;
            background: url(../../../../public/img/board/pm-circle.png) no-repeat;
            background-size: 100% 100%;
        }
        .weather-info {
            position: absolute;
            left: 9.3125rem;
            top: 4.375rem;
            color: #7098c0;
            font-size: 0.6875rem;
        }
        .next-weather {
            color: white;
            position: absolute;
            left: 8rem;
            top: 1rem;
            ul li {
              margin-left: 1rem;
              float: left;
              text-align: center;
              img {
                width: 2rem;
                height: 2rem;
              }
            }
        }
      }
    }
    .energyratio {
        position: relative;
        width: calc(50% - 1rem);
        // width: 21rem;
        height: 11.625rem;
        // margin-left: 0.4375rem;
        float: left;
          margin-bottom: 0.375rem;
        background: url(../../../../public/img/board/back-energyratio.png) no-repeat;
        background-size: 100% 100%;
        .chart-energyratio {
            position: absolute;
            left: 0rem;
            top: 0rem;
            // width: 21rem;
            width: 100%;
            height: 11.5rem;
        }
    }
    .center-middle{
      position: absolute;
      left: 21.75rem;
      width: 44.5625rem;
      .orders {
          position: relative;
          width: 21.625rem;
          height: 11.625rem;
          margin-left: 0.5rem;
          float: left;
          background: url(../../../../public/img/board/back-orders.png) no-repeat;
          background-size: 100% 100%;
          .chart-orders {
              position: absolute;
              left: 0rem;
              top: 0rem;
              width: 21rem;
              height: 11.5rem;
          }
      }
       #map {
          position: relative;
          height: 34.75rem;
          // height: 45.28rem;
          background: url(../../../../public/img/board/back-map.png) no-repeat;
          background-size: 100% 100%;
          ul {
              list-style-type: none;
              position: absolute;
              left: 3.25rem;
              bottom: 1.875rem;
              width: 50%;
              li {
                  float: left;
                  font-size: 0.825rem;
                  line-height: 1.3rem;
                  color: #03b4d6;
                  cursor: pointer;
                  width: 33.333%;
                  text-align: center;
                  &.active {
                      color: white;
                      font-weight: bold;
                  }
              }
          }
          #slideshow {
              position: relative;
              left: 0.8rem;
              top: 6.8125rem;
              width: 31.0625rem;
              height: 25.9rem;
              overflow: hidden;
          }
          .totalinfo {
              position: absolute;
              color: white;
              right: 1.3125rem;
              top: 5.625rem;
              font-size: 1rem;
              line-height: 1.73rem;
              letter-spacing: 0.1rem;
              width: 12.0625rem;
              height: 18.0625rem;
              background: url(../../../../public/img/board/back-totalinfo.png) no-repeat;
              background-size: 100% 100%;
              padding-top: 1.875rem;
              padding-left: 2.2rem;
              box-sizing: border-box;
              .totalinfo-title {
                  color: #15f9fc;
              }
              .totalinfo-content {
                  color: #feed00;
              }
          }
          .bigtotalinfo {
              position: absolute;
              color: white;
              right: 1.3125rem;
              top: 5.625rem;
              font-size: 1rem;
              line-height: 1.73rem;
              letter-spacing: 0.1rem;
              width: 12.0625rem;
              height: 21.0625rem;
              background: url(../../../../public/img/board/back-totalinfo.png) no-repeat;
              background-size: 100% 100%;
              padding-top: 1.875rem;
              padding-left: 2.2rem;
              box-sizing: border-box;
              cursor: pointer;
              .totalinfo-title {
                  color: #15f9fc;
              }
              .totalinfo-content {
                  color: #feed00;
              }
          }
          .title {
            position: absolute;
            color: white;
            font-size: 1.2rem;
            font-weight: bold;
            text-align: center;
            letter-spacing: 0.2rem;
            height: 3.3125rem;
            width: 21.1875rem;
            line-height: 3rem;
            top: 0;
            left: 50%;
            transform: translate(-50%, 0);
        }
      }
    }
    .eqratio {
          position: relative;
          // height: 22.875rem;
          float: left;
          width: 50%;
          height: 11.625rem;
          background: url(../../../../public/img/board/back-eqratio.png) no-repeat;
          background-size: 100% 100%;
          // margin-bottom: 0.375rem;
          margin-left: 0.5rem;
          .chart-eqratio {
              position: absolute;
              left: 0rem;
              top: 1.6875rem;
              width: 21rem;
              height: 10rem;
          }
      }
    .center-right{
      position: absolute;
      top: 2.6875rem;
      left: 66.325rem;
      width: 21.25rem;
      .kpi {
          position: relative;
          height: 11.875rem;
          background: url(../../../../public/img/board/back-kpi.png) no-repeat;
          background-size: 100% 100%;
          #kpi-chart {
              position: absolute;
              left: 3.125rem;
              top: 3.125rem;
              width: 7.1875rem;
              height: 7.1875rem;
          }
          .kpi-info {
              position: absolute;
              text-align: left;
              left: 12.5rem;
              top: 2.1875rem;
              width: 6.5625rem;
              height: 8.4375rem;
              .info-name {
                  color: #2e5197;
                  margin-left: 0.3125rem;
                  font-size: 0.75rem;
              }
              .info-box1 {
                  width: 0.625rem;
                  height: 0.625rem;
                  margin-right: 0.3125rem;
                  display: inline-block;
                  background: #f47302;
              }
              .info-data {
                  color: white;
                  margin-left: 1.25rem;
                  font-size: 1.125rem;
              }
              .info-box2 {
                  width: 0.625rem;
                  height: 0.625rem;
                  margin-right: 0.3125rem;
                  display: inline-block;
                  background: #00a5ff;
              }
              .info-box3 {
                  width: 0.625rem;
                  height: 0.625rem;
                  margin-right: 0.3125rem;
                  display: inline-block;
                  background: #00c375;
              }
          }
      }
      .energyeq2 {
        position: relative;
        height: 21.325rem;
        // height: 11.5rem;
        background: url(../../../../public/img/board/back-energyeq.png) no-repeat;
        background-size: 100% 100%;
        margin-bottom: 0.375rem;
        padding-top: 2rem;
        .top-table{
          width: 100%;
          text-align: center;
          margin-top: 1.5rem;
          th{
            color: #2b97c9
          }
          tbody{
            color: #fff;
            tr{
              border-bottom: 1px solid #182551;
              line-height: 3rem;
            }
          }
        }
      }
      .energyeq1 {
        position: relative;
        height: 11.625rem;
        // height: 11.5rem;
        background: url(../../../../public/img/board/back-energyeq.png) no-repeat;
        background-size: 100% 100%;
        // margin-bottom: 0.375rem;
        .item-block-3{
          width: 33.3%;
          float: left;
          margin-top: 5em;
          text-align: center;
        }
        .icon-coal {
            // position: absolute;
            // left: 2.5rem;
            // top: 3.225rem;
            width: 4.125rem;
            height: 4.125rem;
            display: inline-block;
            background: url(../../../../public/img/board/coal.png) no-repeat;
            background-size: 100% 100%;
        }
        .icon-ele {
            // position: absolute;
            // left: 9rem;
            // top: 3.225rem;
            width: 4.125rem;
            height: 4.125rem;
            display: inline-block;
            background: url(../../../../public/img/board/ele.png) no-repeat;
            background-size: 100% 100%;
        }
        .icon-water {
            // position: absolute;
            // left: 15.5rem;
            // top: 3.225rem;
            width: 4.125rem;
            height: 4.125rem;
            display: inline-block;
            background: url(../../../../public/img/board/water.png) no-repeat;
            background-size: 100% 100%;
        }
        .coal-info {
            // position: absolute;
            // left: 0.5rem;
            // top: 7rem;
            // width: 5.625rem;
            text-align: center;
            height: 2.5rem;
        }
        .ele-info {
            // position: absolute;
            // left: 9rem;
            // top: 7rem;
            // width: 5.625rem;
            text-align: center;
            height: 2.5rem;
        }
        .water-info {
            // position: absolute;
            // left: 15.5rem;
            // top: 7rem;
            // width: 5.625rem;
            text-align: center;
            height: 2.5rem;
        }
        .proj-table {
            // color: #00c680;
            color: #fff;
            position: absolute;
            left: 0.4125rem;
            top: 9.375rem;
            .num-td {
              vertical-align: middle;
              text-align: center;
            }
            td {
                width: 4rem;
                height: 2rem;
                font-size: 13px;
                color: #fff;
                padding: 0.5rem 0.05rem;
            }
        }
        .info-title {
            color: #03b4d6;
            font-size: 0.725rem;
        }
        .content-eqnum {
            // color: #2886ca;
            color: #fff;
            font-weight: bold;
            font-size: 1rem;
        }
        .content-goodrate {
            // color: #00c680;
            color: #fff;
            font-weight: bold;
            font-size: 1rem;
        }
        .special-row {
            background: #101a36;
        }
      }
      .energyeq {
        position: relative;
        height: 10rem;
        // height: 11.5rem;
        background: url(../../../../public/img/board/back-energyeq.png) no-repeat;
        background-size: 100% 100%;
        margin-bottom: 0.375rem;
        .icon-eqnum {
            position: absolute;
            left: 1.8125rem;
            top: 4.0625rem;
            width: 4.125rem;
            height: 4.125rem;
            background: url(../../../../public/img/board/icon-eqnum.png) no-repeat;
            background-size: 100% 100%;
        }
        .icon-goodrate {
            position: absolute;
            left: 11.125rem;
            top: 4.0625rem;
            width: 4.125rem;
            height: 4.125rem;
            background: url(../../../../public/img/board/icon-goodrate.png) no-repeat;
            background-size: 100% 100%;
        }
        .eqnum-info {
            position: absolute;
            left: 5.7125rem;
            top: 4.775rem;
            width: 5.625rem;
            text-align: center;
            height: 2.5rem;
        }
        .goodrate-info {
            position: absolute;
            left: 15.5625rem;
            top: 4.775rem;
            width: 5.625rem;
            height: 2.5rem;
        }
        .proj-table {
            color: #00c680;
            position: absolute;
            left: 0.4125rem;
            top: 9.375rem;
            .num-td {
              vertical-align: middle;
              text-align: center;
            }
            td {
                width: 4rem;
                height: 2rem;
                font-size: 13px;
                color: #fff;
                padding: 0.5rem 0.05rem;
            }
        }
        .info-title {
            color: #03b4d6;
            font-size: 0.8rem;
        }
        .content-eqnum {
            color: #2886ca;
            font-weight: bold;
            font-size: 1.4rem;
        }
        .content-goodrate {
            color: #00c680;
            font-weight: bold;
            font-size: 1.4rem;
        }
        .special-row {
            background: #101a36;
        }
      }
    }
  }
}
</style>
